<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<!-- source http://www.scnoob.com More templates http://www.scnoob.com/moban -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>商品推广后台</title>

<link rel="stylesheet" type="text/css" th:href="@{/assets/css/bootstrap.min.css}">

<link rel="stylesheet" type="text/css" th:href="@{/assets/fonts/line-icons.css}">

<link th:href="@{/assets/plugins/datatables/dataTables.bootstrap4.min.css}" rel="stylesheet" type="text/css" />
<link th:href="@{/assets/plugins/datatables/buttons.bootstrap4.min.css}" rel="stylesheet" type="text/css" />

<link th:href="@{/assets/plugins/datatables/responsive.bootstrap4.min.css}" rel="stylesheet" type="text/css" />

<link rel="stylesheet" type="text/css" th:href="@{/assets/css/main.css}">

<link rel="stylesheet" type="text/css" th:href="@{/assets/css/responsive.css}">
</head>
<body>
<div class="app header-default side-nav-dark">
 <div class="layout">

<div class="page-container pl-0">

<div class="main-content">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header border-bottom">
<h4 class="card-title">商家列表</h4>
 <a th:href="@{/admin/merchant/merchantInfo}" class="float-right">
 <button type="button" class="btn btn-outline-dark">添加新商家</button>
 </a>
</div>
<div class="card-body">
<div class="table-responsive">
<table id="datatable" class="table table-bordered" style="width: 100%;">
 <thead>
 <tr>
  <th>#</th>
  <th>商家姓名</th>
  <th class="text-center">商家状态</th>
  <th class="text-center">操作</th>
 </tr>
 </thead>
 <tbody>
 <!--<tr th:each="merchant:${merchants}">
  <th scope="row" th:text="${merchant.id}"></th>
  <td th:text="${merchant.name}"></td>
  <td th:switch="${merchant.isDel}" class="text-center">
   <span th:case="'0'">启用中</span>
   <span th:case="'1'">已禁用</span>
  </td>
  <td th:switch="${merchant.isDel}" class="text-center">
   <a th:href="@{/admin/merchant/availableOrDisabled(type=0,id=${merchant.id})}" th:case="'1'">
    <button type="button" class="btn btn-outline-success">启用</button></a>
   <a th:href="@{/admin/merchant/availableOrDisabled(type=1,id=${merchant.id})}" th:case="'0'">
    <button type="button" class="btn btn-outline-danger">禁用</button></a>
   <a th:href="@{/admin/merchant/merchantInfo(id=${merchant.id})}">
    <button type="button" class="btn btn-outline-info">修改</button></a>
  </td>
 </tr>-->
 </tbody>
</table>
</div>
</div>
</div>
</div> 
</div> 

</div>



</div>

</div>
 </div>
</div>

<div id="preloader">
<div class="loader" id="loader-1"></div>
</div>

<script th:src="@{/assets/js/jquery-min.js}"></script>
<script th:src="@{/assets/js/popper.min.js}"></script>
<script th:src="@{/assets/js/bootstrap.min.js}"></script>
<script th:src="@{/assets/js/jquery.app.js}"></script>
<script th:src="@{/assets/js/main.js}"></script>

<script th:src="@{/assets/plugins/datatables/jquery.dataTables.min.js}"></script>
<script th:src="@{/assets/plugins/datatables/dataTables.bootstrap4.min.js}"></script>

<script th:src="@{/assets/plugins/datatables/dataTables.buttons.min.js}"></script>
<script th:src="@{/assets/plugins/datatables/buttons.bootstrap4.min.js}"></script>
<script th:src="@{/assets/plugins/datatables/jszip.min.js}"></script>
<script th:src="@{/assets/plugins/datatables/pdfmake.min.js}"></script>
<script th:src="@{/assets/plugins/datatables/vfs_fonts.js}"></script>
<script th:src="@{/assets/plugins/datatables/buttons.html5.min.js}"></script>
<script th:src="@{/assets/plugins/datatables/buttons.print.min.js}"></script>
<script th:src="@{/assets/plugins/datatables/buttons.colVis.min.js}"></script>

<script th:src="@{/assets/plugins/datatables/dataTables.responsive.min.js}"></script>
<script th:src="@{/assets/plugins/datatables/responsive.bootstrap4.min.js}"></script>

<script th:src="@{/assets/js/datatables.init.js}"></script>

<script type="text/javascript" >
 $("#datatable").DataTable({
  "oLanguage": {
   "sUrl": "/assets/page_zh_CN.json"
  },
  serverSide: true, //开启后端模式
  // searching: false,  //禁用原生搜索
  // "pageLength": 10,         //初始化显示几条数据
  "sAjaxSource": "/admin/merchant/pageTable",
  "fnServerData": function (sSource, aoData, fnCallback) {
   $.ajax({
    "dataType": 'json',
    "type": "POST",
    "url": sSource,
    "data": {
     aoData: JSON.stringify(aoData)
    },
    "success": fnCallback
   });
  },
  "bDeferRender": true,// 是否启用延迟加载：当你使用AJAX数据源时，可以提升速度。默认值：False
  //列表表头字段
  "aoColumns": [
   {"mData": "merchantId","width":"25%"},
   {"mData": "merchantName","width":"25%","orderable" : false},
   {"mData": "merchantStatus","width":"25%","orderable" : false},
   {"mData": "merchantOperate","width":"25%","orderable" : false}
  ],
  "aoColumnDefs": [
   {
    "sClass": "text-center",
    "aTargets": [3],
    "mData": "merchantOperate",
    "mRender": function (a, b, c, d) {//a表示productOperate对应的值，c表示当前记录行对象；product对象，b display ； d 当前行 当前列
     $("#datatable tbody tr:eq("+d.row+")").attr("role","none");
     var html = '';
     if (a == 1){
      html += '<a href="/admin/merchant/availableOrDisabled?type=0&id='+c.merchantId+'" >' +
      '<button type="button" class="btn btn-outline-success">启用</button>' +
      '</a>\n';
     } else if (a == 0) {
      html += '<a href="/admin/merchant/availableOrDisabled?type=1&id='+c.merchantId+'" >' +
              '<button type="button" class="btn btn-outline-danger">禁用</button>' +
              '</a>\n';
     }
     html += '<a href="/admin/merchant/merchantInfo?id='+c.merchantId+'" >' +
             '    <button type="button" class="btn btn-outline-info">修改</button></a>';
     return html;
    }
   },
   {
    "sClass": "text-center",
    "aTargets": [2],
    "mData": "productStatus"
   }
  ],
  "fnRowCallback" : function(nRow, aData, iDisplayIndex) {//相当于对字段格式化
   if (aData["merchantStatus"] == 0) {
    $('td:eq(2)', nRow).html("<span>启用中</span>");
   } else if (aData["merchantStatus"] == 1) {
    $('td:eq(2)', nRow).html("<span>已禁用</span>");
   }
  }
 });
</script>
</body>

<!-- source http://www.scnoob.com More templates http://www.scnoob.com/moban -->
</html>